<template>
  <div class="container">
    <div class="custom-row">
      <div 
        v-for="item in list" 
        :key="item.id"
        class="custom-col"
        @click="goDetail(item.id)"
      >
        <div class="content-item">
          <el-image 
            :src="item.image" 
            fit="cover" 
            class="item-image"
          />
          <div class="item-title">{{ item.title }}</div>
          <div class="info-row">
            <div class="author-info">
              <el-avatar :src="item.avatar" size="small" />
              <span class="author-name">{{ item.author }}</span>
            </div>
            <div class="like-count">
              <el-icon><Star /></el-icon>
              {{ item.likes }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>



<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'
import { Star } from '@element-plus/icons-vue'

interface ContentItem {
  id: number
  title: string
  description: string
  likes: number
  author: string
  avatar: string
  image: string
}

const list = ref<ContentItem[]>([])
const router = useRouter()

const fetchData = async () => {
  try {
    const response = await axios.get('/Huanglist')
    list.value = response.data
  } catch (error) {
    console.error('数据获取失败:', error)
  }
}

const goDetail = (id: number) => {
  router.push(`/HuangDetail/${id}`)
}

onMounted(() => {
  fetchData()
})
</script>
<style scoped>
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
}

.custom-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.custom-col {
  width: calc((100% - 64px) / 5); /* 默认一行5个，4个间距共64px */
  box-sizing: border-box;
}

.content-item {
  background: white;
  border-radius: 0.8rem;
  padding: 0.6rem;
  cursor: pointer;
}

.item-image {
  width: 100%;
  height: 12rem;
  border-radius: 0.4rem;
  object-fit: cover;
}

.item-title {
  font-size: 0.9rem;
  margin: 0.6rem 0;
  line-height: 1.2;
  height: 2.4rem;
  overflow: hidden;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.author-info {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.author-name {
  font-size: 0.7rem;
  color: #666;
}

.like-count {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.7rem;
  color: #f56c6c;
}

/* 响应式列数调整 */
@media (max-width: 1199px) {
  .custom-col {
    width: calc((100% - 48px) / 4); /* 一行4个 */
  }
}

@media (max-width: 991px) {
  .custom-col {
    width: calc((100% - 32px) / 3); /* 一行3个 */
  }
}

@media (max-width: 767px) {
  .custom-col {
    width: calc((100% - 16px) / 2); /* 一行2个 */
  }

  .item-image {
    height: 10rem;
  }
}
</style>
